﻿@model List<Auction_Intranet.Models.RoomModel>

@{
    ViewBag.Title = "Rooms";
}

<div class="admin-rooms">

<h2>Rooms available</h2>

<p>
    @Html.ActionLink("Create New", "CreateRoom")
</p>
<table>
    <tr>
        <th>
            Name
        </th>
        <th>
            Location
        </th>
        <th>
            Capacity
        </th>
        <th>
            Size
        </th>
        <th>
            Pictures
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.room.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.room.Location)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.room.Capacity)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.room.Size)
        </td>
        <td class="pictures-container">
            <ul class="picture-list">
                @foreach (var pic in item.pictures)
                {                     
                    <li class="picture-item item-@pic.Id">
                        <a class="delete-picture" href="#" id="@pic.Id" data-id="@item.room.Id" title="Delete Picture">Delete Picture</a>
                        <img alt="Room picture" src="@Url.Content("~/Content/Photos/Rooms/Thumb/" + pic.Id + ".jpg")"/>
                    </li>
                }
            </ul>
        </td>
        <td>
            @Html.ActionLink("Edit information", "EditRoom", new { id = item.room.Id }) |
            @Html.ActionLink("Details", "DetailsRoom", new { id = item.room.Id }) |
            @Html.ActionLink("Delete", "DeleteRoom", new { id = item.room.Id })
            <span class="add-link-@item.room.Id @item.allowAddPicture">| @Html.ActionLink("Add picture", "AddPicture", new { id = item.room.Id })</span>
        </td>
    </tr>
}

</table>

</div>

<script type="text/javascript">
    $(function () {
        $(".picture-item a").click(function () {
            var idPic = $(this).attr("id");
            var idRoom = $(this).attr("data-id");
            $.ajax({
                type: 'POST',
                async: false,
                url: "/Admin/DeletePicture",
                data: { picId: idPic, roomID: idRoom },
                success: function (data) {
                    //success
                    if (data !== "") {
                        //console.log("Server deleted picture. Removing item in list.");                        
                        $(".item-" + idPic).fadeOut('slow', function () {
                            $(this).remove();
                        });                        
                        $(".add-link-" + idRoom).removeClass("hide");
                    }
                    //error
                    else {
                        alert("Server error: Picture could not be deleted.")
                    }
                }
            });
        });
    });
</script>